<script setup>
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
import {WordPaster} from '/public/WordPaster/js/w'
import {zyCapture} from '/public/zyCapture/z'
import {zyOffice} from '/public/zyOffice/js/z'
import '/public/WordPaster/js/w.css'
import '/public/layer-v3.1.1/layer/layer'
import '/public/layer-v3.1.1/layer/theme/default/layer.css'

defineProps({
  msg: String
})

const edtData = "<p>泽优Word一键粘贴控件（WordPaster） for vue3-cli-tinymce5</p><p>泽优全平台Word一键粘贴控件（WordPaster）</p><p>泽优全平台截屏控件（zyCapture）</p><p>泽优Office文档转换服务（zyOffice）</p>"
const init= {
  selector: 'textarea',
  //汉化,路径是自定义的，一般放在public或static里面，汉化文件要自己去下载
  //language_url: '/tinymce/zh_CN.js',
  //language: 'zh_CN',
  //皮肤
  skin: 'oxide',
  // https://www.tiny.cloud/docs/tinymce/5/content-filtering/#valid_elements
  valid_elements: 'p[*],h1[*],h2[*],span[*],strong/b,img[*],table[*]',
  // 允许 H1 包含块级元素 
  // https://www.tiny.cloud/docs/tinymce/5/content-filtering/#custom_elements
  custom_elements: '~h1>div,~h1>strong,~h1>span,~h1>table,~span>span,~h2>strong',
  // 明确合法子元素 
  valid_children: '+h1[div|table|span|svg],+h2[span]',
   // 关闭全局校验（慎用！）
  fix_list_elements: false,
  validate: false,
  // 禁用自动转换样式为类 
  inline_styles: true,
  convert_fonts_to_spans: false,
  // 保留粘贴内容的所有样式 
  paste_retain_style_properties: 'all',
  // 禁用粘贴过滤 
  paste_filter_drop: false,
  // 允许复杂嵌套 
  allow_html_in_named_anchor: true,
  //隐藏技术支持
  branding: false,
  //隐藏底栏的元素路径
  elementpath: false,
  //关闭菜单
  menubar: false,
  //隐藏状态栏
  statusbar: false,
  //公式插件
  external_plugins: {
    zycapture: '/public/zyCapture/plugin.min.js',
    wordpaster: '/public/WordPaster/plugin/wordpaster.js',
    importwordtoimg: '/public/WordPaster/plugin/importwordtoimg.js',
    netpaster: '/public/WordPaster/plugin/netpaster.js',
    wordimport: '/public/WordPaster/plugin/wordimport.js',
    excelimport: '/public/WordPaster/plugin/excelimport.js',
    pptimport: '/public/WordPaster/plugin/pptimport.js',
    pdfimport: '/public/WordPaster/plugin/pdfimport.js',
    zyoffice: '/public/zyOffice/plugin/zyoffice.js',
    zywordexport: '/public/zyOffice/plugin/zywordexport.js',
    zyofficepdf: '/public/zyOffice/plugin/zyofficepdf.js'
  },
  plugins: 'autoresize',
  //工具栏
  toolbar: 'bold italic underline forecolor fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry | image zycapture | wordpaster importwordtoimg netpaster wordimport excelimport pptimport pdfimport | zyoffice zywordexport zyofficepdf',          //高度
  height: 200,
  //粘贴data格式的图像
  paste_data_images: true,
  width: '100%' ,
  setup:function(edt){
    edt.on("paste",function(e){
        WordPaster.getInstance().SetEditor(edt).PasteManual();
        e.preventDefault();
    });
  }
}
      
//初始化
WordPaster.getInstance({
  //上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
  PostUrl:"http://localhost:8891/upload.aspx",
  //为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
  ImageUrl:"http://localhost:8891{url}",
  //设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
  FileFieldName: "file",
  //提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
  ImageMatch: ''  
})

// zyoffice
zyOffice.getInstance({
  word: 'http://localhost:13710/zyoffice/word/convert',
  wordExport: 'http://localhost:13710/zyoffice/word/export',
  pdf: 'http://localhost:13710/zyoffice/pdf/upload'
})

// zyCapture
zyCapture.getInstance({
  config: {
    PostUrl: 'http://localhost:8891/upload.aspx',
    License2: '',
    FileFieldName: 'file',
    Fields: { uname: 'test' },
    ImageUrl: 'http://localhost:8891{url}'
  }
})
</script>

<template>
  <h1>{{ msg }}</h1>
<editor api-key="n84rpcpk3u22bnr0oy1q9s8w78975r67ivfdosf04jwv6pn2" :init="init" v-model="edtData"/>
<p>第二个编辑器</p>
<editor api-key="n84rpcpk3u22bnr0oy1q9s8w78975r67ivfdosf04jwv6pn2" :init="init" v-model="edtData"/>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
